<!DOCTYPE html>
<html>
  <head>
    <title>Jcrop Example</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="../dist/jcrop.css" />
  </head>
  <body>

    <div style="padding:0 5%;">
    <h1 style="font-family:Helvetica,sans-serif;">
      Jcrop Example 
      <span style="color:lightgray;">- Aspect Ratio + SVG</span>
    </h1>

    <img id="target" src="https://d3o1694hluedf9.cloudfront.net/market-750.jpg">

    <div style="margin-top:0.5em;">
      <button onclick="setImage('market-750.jpg')">Market</button>
      <button onclick="setImage('sierra-750.jpg')">Sierra</button>
      <button onclick="setImage('img/sierra.jpg')">Sierra2</button>
      <button onclick="setImage('img/lake.jpg')">Lake</button>
    </div>

    </div>

    <div id="ext">
      <img src="https://d3o1694hluedf9.cloudfront.net/img/js.svg" id="img">
    </div>

    <script src="../dist/jcrop.js"></script>
    <script>
      const jcp = Jcrop.attach('target',{multi:false});

      const rect = Jcrop.Rect.fromPoints([100,100],[300,300]);

      const crop = jcp.newWidget(rect,{
        aspectRatio: rect.aspect,
        canRemove: false
      });

      const img = document.getElementById('img');
      crop.el.appendChild(img);

      function setImage(tag){
        document.getElementById('target').src =
          'https://d3o1694hluedf9.cloudfront.net/'+tag;
      }

      function anim(){
        if (!jcp.active) return false;
        const animtype = document.getElementById('animtype').value;
        jcp.active.animate(rrect(),null,animtype);
        jcp.focus();
      }
    </script>
  </body>
</html>
